<template>
  <div class="allMv">
    <div class="container">
      <div class="top">
        <span class="title">全部MV</span>
      </div>
      <div class="classification">
        <div class="region">
          地区：
          <span :class="area === '全部' ? 'area' : '' " @click="areaChange('全部')">全部</span>|
          <span :class="area === '内地' ? 'area' : '' " @click="areaChange('内地')">内地</span>|
          <span :class="area === '港台' ? 'area' : '' " @click="areaChange('港台')">港台</span>|
          <span :class="area === '欧美' ? 'area' : '' " @click="areaChange('欧美')">欧美</span>|
          <span :class="area === '韩国' ? 'area' : '' " @click="areaChange('韩国')">韩国</span>|
          <span :class="area === '日本' ? 'area' : '' " @click="areaChange('日本')">日本</span>
        </div>
        <div class="form">
          类型：
          <span :class="type === '全部' ? 'type' : '' " @click="typeChange('全部')">全部</span>|
          <span :class="type === '官方版' ? 'type' : '' " @click="typeChange('官方版')">官方版</span>|
          <span :class="type === '原声' ? 'type' : '' " @click="typeChange('原声')">原生</span>|
          <span :class="type === '现场版' ? 'type' : '' " @click="typeChange('现场版')">现场版</span>|
          <span :class="type === '网易出品' ? 'type' : '' " @click="typeChange('网易出品')">网易出品</span>
        </div>
        <div class="sort">
          排序：
          <span :class="order === '上升最快' ? 'order' : '' " @click="sortChange('上升最快')">上升最快</span>|
          <span :class="order === '最热' ? 'order' : '' " @click="sortChange('最热')">最热</span>|
          <span :class="order === '最新' ? 'order' : '' " @click="sortChange('最新')">最新</span>
        </div>
      </div>
      <div class="allMvList">
        <div class="li" v-for="(item, index) in allMvlist" :key="index" @click="toVideoPage(item.id)">
          <div class="img">
            <img :src="item.cover" />
            <div class="playCount"><i class="iconfont icon-video"></i> {{ item.playCount >10000 ? (item.playCount / 10000).toFixed(0) + '万' : item.playCount }} </div>
          </div>
          <div class="name">{{ item.name }}</div>
          <div class="artistName">
            <a v-for="(item1, index) in item.artists" :key="index">
            {{ index + 1 === item.artists.length ? item1.name : item1.name + ' / ' }}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAllMvList } from '../../network/videomv.js'
export default {
  data () {
    return {
      area: '全部',
      type: '全部',
      order: '上升最快',
      allMvlist: [],
      total: 0
    }
  },
  methods: {
    getAllMvList (area, type, order) {
      getAllMvList(area, type, order).then(res => {
        // console.log(res.data)
        this.total = res.data.count
        this.allMvlist = res.data.data
        // console.log(this.allMvlist)
      })
    },
    areaChange (area) {
      this.area = area
      this.getAllMvList(this.area, this.type, this.order)
    },
    typeChange (type) {
      this.type = type
      this.getAllMvList(this.area, this.type, this.order)
    },
    sortChange (order) {
      this.order = order
      this.getAllMvList(this.area, this.type, this.order)
    },
    // MV播放页面
    toVideoPage (id) {
      this.$router.push('/video_player/' + id)
    }
  },
  created () {
    this.getAllMvList(this.area, this.type, this.order)
  }
}
</script>

<style lang="less" scoped>
  .allMv {
    width: 82%;
    overflow: auto;
    .container {
      width: 95%;
      margin: 10px auto;
      .top {
        width: 100%;
        padding: 10px 0;
        border-bottom: 1px solid #e1e1e2;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        .title {
          font-size: 23px;
        }
      }
      .classification {
        width: 100%;
        color: #666666;
        font-size: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #e1e1e2;
        .region, .form, .sort {
          margin: 15px 0;
          display: flex;
          align-items: center;
          span {
            margin: 0 13px;
            padding: 1px 7px;
            cursor: pointer;
          }
          span:first-child {
            margin-left: 5px;
          }
        }
      }
      .allMvList {
        width: 100%;
        // height: 580px;
        margin-bottom: 50px;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        .li {
          width: 310px;
          margin: 15px 0;
          box-sizing: border-box;
          cursor: pointer;
          .img {
            position: relative;
            width: 100%;
            img {
              width: 100%;
              height: 180px;
            }
            .playCount {
              position: absolute;
              top: 0;
              right: 0;
              width: 30%;
              height: 25px;
              color: #fff;
              text-align: right;
              padding-right: 8px;
              background-image: linear-gradient(to right, rgba(0,0,0,0.02), rgba(0,0,0,0.4));
              transform: translateY(0);
              transition: transform 0.5s;
              i {
                font-size: 16px;
              }
            }
          }
          .name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .name, .artistName {
            cursor: pointer!important;
            a {
              color: #666666;
              font-size: 15px;
            }
          }
        }
      }
    }
  }
  .area, .type, .order {
    // padding: 1px 7px;
    border-radius: 3px;
    color: #fff;
    font-size: 16px;
    background-color: #8f9096;
  }
</style>
